<template>
  <div class="InventoryB">
    <div class="flexC">
      <div class="flex JustifyContentC AlignItemsC" style="padding: 2.5rem 0rem;"><p class="colorF textC Bold font_s30" style="font-weight: bold;">年检</p></div>
      <div class="flexC" style="padding:0rem 4.0625rem 2.25rem 4.0625rem;">
        <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF  Bold">
          <li class="flex2 textC">年检</li>
          <li class="flex2 textC">年检</li>
          <li class="flex2 textC">年检</li>
          <li class="flex2 textC">年检</li>
        </ul>
        <div style="height: 70vh;" class="superviseList font_s18">
          <ul v-for="(item, index) in arr" class="Inv_ulb flex colorF Bold textC" :key="'list' + index">
            <li class="flex2">年检</li>
            <li class="flex2">年检</li>
            <li class="flex2">年检</li>
            <li class="flex2">年检</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.InventoryB {
  .Inv_ula {
     height: 3.75rem;
     font-size: 1.5625rem;
     font-weight: bold;
     background: url(../../../assets/img/home/components/01.png) no-repeat;
     background-size: 100% 3.85rem;
      margin-left: -3px;
      margin-right: -3px;
    }
    .superviseList {
      overflow-x: hidden;
      overflow-y: auto;
    }
    .superviseList::-webkit-scrollbar {
      width: 8px;
      border-radius: 10px;
      background: rgba($color: #fff, $alpha: 0.6);
    }
   .Inv_ulb {
     font-weight: bold;
     border: 1px solid rgba(255, 255, 255, 0.36);
     border-top: none;
     li {
       padding: 1rem;
     }
   }

   .Inv_ulb li:nth-child(odd) {
     background: rgba(255, 255, 255, 0.13);
   }
}
</style>
